<template>
    <el-row>
        <el-col :span="8">
            <div class="flex-box sea-page margin-right">
                <div class="flex-header">
                    <h5>用户信息面板</h5>
                    <button class="sea-btn-icon pull-right"><i class="fa fa-fw fa-refresh"></i></button>
                </div>
                <div class="flex-body">
                    <div class="user-panel">
                        <img src="/img/head_02.png"
                             class="img-circle" alt="header"/>
                        <p class="user-info"> Alexander Pierce </p>
                        <p class="user-info"> Web Developer Member since Nov. 2012</p>
                    </div>
                    <div class="text-block border-bottom">
                        <strong><i class="fa fa-phone"></i> 电话：</strong>
                        <span>123123121</span>
                    </div>
                    <div class="text-block border-bottom">
                        <strong><i class="fa fa-envelope-o"></i> 邮箱：</strong>
                        <span>413203144@qq.com</span>
                    </div>
                </div>
            </div>
        </el-col>

        <el-col :span="16">
            <div class="flex-box sea-page">
                <div class="flex-body">
                    <el-tabs>

                        <el-tab-pane label="重置密码">
                            <blockquote class="blockquote-primary">
                                <p>重置之后的密码为：test</p>
                                <p>管理员不得擅自重置用户的密码！</p>
                                <p>因为默认密码都是一样的，修改后需及时修改密码！</p>
                            </blockquote>
                            <el-button type="primary">重置密码</el-button>
                        </el-tab-pane>
                        <el-tab-pane label="基础信息">
                            <sea-form style="width: 80%" ref="ruleFormRef" label-width="100px"
                                     :model="props.object" :rules="user.formRules" :submit="user.modify">
                                <template #default="{form_data}">
                                    <el-form-item label="账户" prop="account">
                                        <el-input v-model="form_data.account" placeholder="账户"></el-input>
                                    </el-form-item>
                                    <el-form-item label="工号" prop="no">
                                        <el-input v-model="form_data.no" placeholder="工号"></el-input>

                                    </el-form-item>
                                    <el-form-item label="性别" prop="gender">
                                        <sea-select v-model="form_data.gender"
                                                    options="non.user_gender" placeholder="性别"></sea-select>
                                    </el-form-item>
                                    <el-form-item label="座右铭" prop="motto">
                                        <el-input v-model="form_data.motto" placeholder="座右铭"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户状态" prop="status">
                                        <el-input v-model="form_data.status" placeholder="用户状态"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户名称" prop="username">
                                        <el-input v-model="form_data.username" placeholder="用户名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话号码" prop="phone">
                                        <el-input v-model="form_data.phone" placeholder="电话号码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="邮箱" prop="email">
                                        <el-input v-model="form_data.email" placeholder="邮箱"></el-input>
                                    </el-form-item>
                                </template>
                            </sea-form>
                        </el-tab-pane>

                        <el-tab-pane label="分组设置">
                            <font-request :provider="queryDept">
                                <template #default="{response, reload, loading}">
                                    <el-skeleton :data="response" :loading="loading">
                                        <div class="flex-row">
                                            <span class="flex-body text-regular flex-center">选中部门进行切换，一个用户只能归属于一个部门！</span>
                                            <button @click="reload" class="flex-right sea-btn-icon"
                                                    title="刷新用户分组信息">
                                                <i class="fa fa-refresh"></i>
                                            </button>
                                        </div>
                                        <el-tree :data="response" @node-click="handleNodeClick"
                                                 default-expand-all :expand-on-click-node="false">
                                        </el-tree>
                                    </el-skeleton>
                                </template>
                            </font-request>

                            <div>
                                <el-divider content-position="left">更换分组</el-divider>

                                <span title="用户当前归属的用户组">当前分组：普通用户</span>
                                <i class="fa fa-fw fa-angle-right"></i>
                                选中分组：
                                <span class="text-primary">{{ selectGroup.label }}</span>

                                <el-button v-show="selectGroup.label" class="pull-right" type="primary"
                                           title="将用户切换到选中的分组">保存确认
                                </el-button>
                            </div>

                        </el-tab-pane>

                        <el-tab-pane label="微信信息">
                            预留板块
                        </el-tab-pane>

                        <el-tab-pane label="业绩排名">
                            预留板块
                        </el-tab-pane>

                    </el-tabs>
                </div>
            </div>

        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import Bamboo from "@/lang/bamboo";
import {ref} from "vue";
import user from "./user";
import dept from "@/view/core/auth/dept/dept";
import SeaSelect from "@/widget/form-item/sea-select.vue";

const selectGroup = ref({});

const props = defineProps({
    // 行级数据
    object: {type: Object, default: undefined}
})

// 查询机构列表
const queryDept = () => dept.list({}).then(list => Bamboo.toTree(list, dept.deptTreeMapper));

/**
 * 分组点击事件
 * @param data 数据
 */
const handleNodeClick = (data) => {
    selectGroup.value = data;
}


</script>

<style scoped>

.user-panel {
    text-align: center;
    background-color: #3c8dbc;
    border: 1px solid #3c8dbc;
    margin-bottom: 10px;
}

.user-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-top: 10px;
}

.img-circle {
    margin-top: 26px;
    height: 90px;
    width: 90px;
    background-color: #eeeeee;
    border: 3px solid rgba(255, 255, 255, 0.2);
}
</style>
